import React, {Component} from 'react';
import Detail from "./Detail";
import {Link, Route, Switch} from "react-router-dom";

class Message extends Component {
    state = {
        messages: [
            {id: '1', title: '消息1'},
            {id: '2', title: '消息2'},
            {id: '3', title: '消息3'}
        ]
    }

    replaceShow = (id, title) => {
        //replace跳转+携带params参数
        //this.props.history.replace(`/home/message/detail/${id}/${title}`)
        //replace跳转+携带search参数
        // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
        //replace跳转+携带state参数
        this.props.history.replace(`/home/message/detail`, {id, title})
    }

    pushShow = (id, title) => {
        //push跳转+携带params参数
        // this.props.history.push(`/home/message/detail/${id}/${title}`)
        //push跳转+携带search参数
        // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)
        //push跳转+携带state参数
        this.props.history.push(`/home/message/detail`, {id, title})
    }

    back = () => {
        this.props.history.goBack()
    }

    forward = () => {
        this.props.history.goForward()
    }
    go = () =>{
        this.props.history.go(-1)
    }

    render() {
        return (
            <div>
                <div className="panel panel-default">
                    <div className="panel-body">
                        <div className="list-group">
                            {
                                this.state.messages.map((msg) => {
                                    return (
                                        <div key={msg.id}>
                                            {/*向路由携带params参数*/}
                                            {/*<Link to={`/home/message/detail/${msg.id}/${msg.title}`} >*/}
                                            {/*    <h4 className="list-group-item-heading">{msg.title}</h4>*/}
                                            {/*</Link>*/}
                                            <button onClick={() => {
                                                this.pushShow(msg.id, msg.title)
                                            }}>push查看
                                            </button>
                                            <button onClick={() => {
                                                this.replaceShow(msg.id, msg.title)
                                            }}>replace查看
                                            </button>
                                            {/*向路由组件携带search参数*/}
                                            {/*<Link to={`/home/message/detail?id=${msg.id}&title=${msg.title}`} key={msg.id}>*/}
                                            {/*    <h4 className="list-group-item-heading">{msg.title}</h4>*/}
                                            {/*</Link>*/}
                                            {/*向路由组件传递state参数*/}
                                            <Link replace to={{
                                                pathname: '/home/message/detail',
                                                state: {id: msg.id, title: msg.title}
                                            }} key={msg.id}>
                                                <h4 className="list-group-item-heading">{msg.title}</h4>
                                            </Link>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                {/*注册路由*/}
                <Switch>
                    {/*声明路由接收参数*/}
                    {/*<Route path="/home/message/detail/:id/:title" component={Detail}/>*/}
                    {/*search参数无需声明接收,正常接收即可*/}
                    {/*<Route path="/home/message/detail" component={Detail}/>*/}
                    {/*state参数无需声明接收,正常接收即可*/}
                    <Route path="/home/message/detail" component={Detail}/>
                </Switch>

                <button onClick={this.back}>回退</button>
                <button onClick={this.forward}>前进</button>
                <button onClick={this.go}>Go</button>
            </div>
        );
    }
}

export default Message;